<template>
  <div></div>
</template>

<script setup>
import { getWuhanBridge } from '@/api'
import { inject, onMounted, onBeforeUnmount } from 'vue'
import { Popup, LineLayer } from '@antv/l7'
const { map, scene } = inject('mapScene')
let popup, bridgeLayer
onMounted(async () => {
  map.flyTo({
    center: [114.26459274967397, 30.5002467409972],
    zoom: 13.2,
    pitch: 67.48,
    bearing: -20.81,
  })
  const { data } = await getWuhanBridge()
  popup = new Popup()
  scene.addPopup(popup)
  bridgeLayer = new LineLayer({})
    .source(data)
    .color('name', ['yellow', 'red', 'blue', 'green'])
    .size(10)
    .shape('arc3d')
    .style({
      thetaOffset: 1,
    })
  scene.addLayer(bridgeLayer)
  bridgeLayer.on('click', (e) => {
    const {
      lngLat,
      feature: {
        properties: { name, info },
      },
    } = e
    popup.setLngLat(lngLat)
    popup.setHTML(`<div style='font-size:12px'>${info}</div>`)
    popup.setTitle(name)
  })
})
onBeforeUnmount(() => {
  scene.removeLayer(bridgeLayer)
  scene.removePopup(popup)
})
</script>

<style lang="scss" scoped></style>
